<template>
  <div >
    <el-container>
      <el-header style="background-color: #0095d7">
        <h1 style="color: white;font-size: 22px;line-height: 60px;margin-left: 0">
          CoolShark商城后台管理系统
        </h1>
      </el-header>
      <el-container  class="layout-body">
        <el-aside width="250px">

          <el-radio-group v-model="isCollapse" style="margin:0;">
            <el-radio-button :label="false">展开</el-radio-button>
            <el-radio-button :label="true">收起</el-radio-button>
          </el-radio-group>
          <el-menu  class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" @select="handleSelect" :collapse="isCollapse"
                    router
                    :default-active="this.$router.currentRoute.path"
          >
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-reading"></i>
                <span slot="title">图书分类管理</span>
              </template>
                <el-menu-item index="/sys-admin/book/book-list">分类列表</el-menu-item>
                <el-menu-item index="/sys-admin/book/book-add">添加分类</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-user"></i>
                <span slot="title">用户管理</span>
              </template>
                <el-menu-item index="/sys-admin/user/user-list">用户列表</el-menu-item>
                <el-menu-item index="/sys-admin/user/user-add">添加用户</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-picture-outline"></i>
                <span slot="title">轮播图管理</span>
              </template>
                <el-menu-item index="/sys-admin/banner/banner-list">轮播图列表</el-menu-item>
                <el-menu-item index="/sys-admin/banner/banner-add">添加轮播图</el-menu-item>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-shopping-cart-full"></i>
                <span slot="title">商品管理</span>
              </template>
                <el-menu-item index="/sys-admin/product/product-list">商品列表</el-menu-item>
                <el-menu-item index="/sys-admin/product/product-add">添加商品</el-menu-item>
            </el-submenu>
          </el-menu>
          <!--**************导航菜单结束*****************-->
        </el-aside>
        <el-main>
            <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: true,
    }
  },
  methods: {
    //开关
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },

  }
}
</script>

<style>
.layout-body {
  position: absolute;
  top: 60px;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>
